﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EntityFormConfigPage.aspx.cs" Inherits="Easy.Web.Pages.EntityPages.EntityFormConfigPage" %>

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head runat="server">
    <title></title>
    <link href="/_css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/_css/common.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/_css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/_css/bootstrap-select.min.css" />
    <script src="/_js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/_js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/_js/bootstrap-select.min.js" type="text/javascript"></script>
    <script src="/_js/json2.js" type="text/javascript"></script>
    <script src="/_js/common.js"></script>
    <script src="/_js/jquery.dragsort-0.5.2.min.js"></script>
    <script src="/_js/bootstrap-select.min.js" type="text/javascript"></script>

    <script src="/_js/CodeMirror/codemirror.js"></script>
    <link href="/_css/codemirror.css" type="text/css" rel="stylesheet" />

    <script src="/_js/CodeMirror/CodeMirrorModes/css/css.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorModes/javascript/javascript.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorModes/htmlmixed/htmlmixed.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorModes/vbscript/vbscript.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorModes/xml/xml.js"></script>


    <script src="/_js/CodeMirror/CodeMirrorAddon/hint/show-hint.js"></script>
    <link href="/_js/CodeMirror/CodeMirrorAddon/hint/show-hint.css" rel="stylesheet" type="text/css" />
    <script src="/_js/CodeMirror/CodeMirrorAddon/hint/javascript-hint.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/hint/html-hint.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/hint/xml-hint.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/selection/selection-pointer.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/selection/active-line.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/edit/matchbrackets.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/edit/closebrackets.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/edit/matchtags.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/edit/closetag.js"></script>

    <style>
        .CodeMirror {
            height: 100%;
        }

        .header {
            padding: 10px;
            background-color: white;
            margin-top: 5px;
        }

        .body {
            margin-top: 5px;
        }

            .body > .body_left {
                padding: 10px;
                background-color: white;
                display: inline-block;
                position: fixed;
                overflow-y: auto;
                overflow-x: hidden;
            }

            .body > .body_right {
                width: 200px;
                margin-left: 2px;
                padding: 10px;
                background-color: white;
                display: inline-block;
                position: fixed;
                right: 0;
                overflow-y: auto;
                overflow-x: hidden;
            }

        body {
            background-color: lightgray;
        }

        label.control-label {
            font-weight: normal;
            font-size: 12px;
            color: #666;
            line-height: 32px;
        }

        #visualizationPannel .form-group > label {
            cursor: move;
            cursor: -webkit-grab;
        }


        .unactive {
            background-color: lightgray;
            border-radius: 4px;
        }

        .BootStrapSelect {
            background-color: #fff;
            border-bottom-color: #eee;
            border: 1px solid #ccc;
        }

        .hidden {
            display: inline-block !important;
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <form id="form2" runat="server" visible="True">
        <div style="padding: 10px; background-color: #F7F7F7">
            <span style="line-height: 32px; font-weight: 600; font-size: large; color: darkgray">Form名称：<span id="span_formname" runat="server"></span>
            </span>
            <!-- -->
            <span class="pull-right" style="margin-left: 5px"><a href="#" class="btn btn-warning ng-binding" title="取消" onclick="btn_back()"><span class="glyphicon glyphicon-trash">取消</span></a>
            </span>
            <asp:LinkButton ID="SaveFormStructure" CssClass="btn btn-primary ng-binding pull-right" OnClientClick="return DoOnSaveButtonClicked()" OnClick="SaveFormStructure_Click" runat="server"><span class="glyphicon glyphicon-floppy-save">保存</span></asp:LinkButton>
        </div>
        <asp:HiddenField ID="buttons" runat="server" />
        <div class="header" style="margin-top: 5px">
            <div id="buttonContent" runat="server" style="display: inline-block">
                <div class="btn btn-primary ng-binding" title="Save" onclick="SaveData('save')">
                    <span class="glyphicon glyphicon-floppy-save"></span><span>保存</span>
                </div>
            </div>
            <div id="addBtn" class="btn btn-warning ng-binding pull-right" title="Save" onclick="cleanModal();$('#myModal').modal('show');">
                <span class="glyphicon glyphicon-plus"></span>
                <span></span>
            </div>
        </div>
        <div class="body">
            <div class="body_left">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#visualizationPannel" aria-controls="home" role="tab" data-toggle="tab">可视化视图</a></li>
                    <li role="presentation"><a href="#formhtmlPannel" aria-controls="profile" role="tab" data-toggle="tab">HTML</a></li>
                    <li role="presentation"><a href="#formjsPannel" aria-controls="messages" role="tab" data-toggle="tab">JS</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="visualizationPannel">
                        <div style="border: 15px solid white;" id="container" class="row gridly">
                            <div class="col-md-8 form-group brick" id="c_tlm_name">
                                <label for="tlm_name" class="col-md-2 control-label">6<span style="color: red;"> *<span></span></span></label><div class="col-md-10">
                                    <input type="input" class="form-control" id="tlm_name" attname="tlm_name" atttype="nvarchar" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" style="width: 100%; height: 100%" class="tab-pane" id="formhtmlPannel">
                        <textarea type="textarea" id="TempTextArea" style="display: none"></textarea>
                        <asp:TextBox ID="content" Width="100%" Height="100%" runat="server" Style="display: none" onchange="$('#container').html($('#content').val());initLeftButton();" TextMode="MultiLine"></asp:TextBox>
                    </div>
                    <div role="tabpanel" style="width: 100%; height: 100%" class="tab-pane" id="formjsPannel">
                        <div style="border: 15px solid white;" class="row gridly" data-listidx="0">
                            <div class="col-md-12 form-group">
                                <label for="tlm_address" class="col-md-2 control-label">JS内容配置</label>
                                <div class="col-md-10">
                                    <asp:ListBox CssClass="selectpicker" data-style="BootStrapSelect" data-width="100%" ID="JsList" runat="server" SelectionMode="Multiple" data-live-search="true"></asp:ListBox>
                                </div>
                            </div>
                            <div class="col-md-12 form-group">
                                <label for="tlm_address" class="col-md-2 control-label">加载数据前</label>
                                <div class="col-md-10">
                                    <asp:TextBox runat="server" CssClass="form-control" ID="jscontent_beforeLoad" Width="100%"></asp:TextBox>
                                </div>
                            </div>
                            <div class="col-md-12 form-group">
                                <label for="tlm_address" class="col-md-2 control-label">加载数据后</label>
                                <div class="col-md-10">
                                    <asp:TextBox runat="server" CssClass="form-control" ID="jscontent_afterLoad" Width="100%"></asp:TextBox>
                                </div>
                            </div>
                            <div class="col-md-12 form-group">
                                <label for="tlm_address" class="col-md-2 control-label">保存数据前</label>
                                <div class="col-md-10">
                                    <asp:TextBox runat="server" CssClass="form-control" ID="jscontent_beforeSave" Width="100%"></asp:TextBox>
                                </div>
                            </div>
                            <div class="col-md-12 form-group">
                                <label for="tlm_address" class="col-md-2 control-label">保存数据后</label>
                                <div class="col-md-10">
                                    <asp:TextBox runat="server" CssClass="form-control" ID="jscontent_afterSave" Width="100%"></asp:TextBox>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="body_right">
                <ul id="fields" class="nav nav-pills nav-stacked">
                    <%=Fields %>
                </ul>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">保存按钮</h4>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="buttonFlag" />
                        <div class="input-group">
                            <span class="input-group-addon">ID</span>
                            <input id="myModalId" type="text" class="form-control" placeholder="请输入名称" aria-describedby="basic-addon1" />
                        </div>
                        <div class="input-group" style="margin-top: 15px">
                            <span class="input-group-addon">名称</span>
                            <input id="myModalName" type="text" class="form-control" placeholder="请输入名称" aria-describedby="basic-addon1" />
                        </div>
                        <div class="input-group" style="margin-top: 15px">
                            <span class="input-group-addon">样式</span>
                            <input id="myModalCSS" type="text" value="btn btn-primary" class="form-control" placeholder="请输入按钮样式类" aria-describedby="basic-addon1" />
                        </div>
                        <div class="input-group" style="margin-top: 15px">
                            <span class="input-group-addon">图标</span>
                            <input id="myModalIcon" type="text" class="form-control" placeholder="请输入按钮样式类" aria-describedby="basic-addon1" />
                        </div>
                        <div class="input-group" style="margin-top: 15px">
                            <span class="input-group-addon">脚本</span>
                            <input id="myModalJS" type="text" class="form-control" placeholder="请输入按钮触发的JS" aria-describedby="basic-addon1" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" onclick="deleteButton()" class="btn btn-danger" data-dismiss="modal">删除</button>
                        <button type="button" onclick="createButton()" class="btn btn-primary" id="myModalOK">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="FormNameModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="FormNameModalLabel">保存表单设计</h4>
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <span class="input-group-addon">架构名称</span>
                            <input id="FormNameModalName" runat="server" type="text" class="form-control" placeholder="请输入架构名称" aria-describedby="basic-addon1" />
                        </div>
                        <div class="input-group" style="margin-top: 15px">
                            <span class="input-group-addon">显示名称</span>
                            <input id="FormNameModalDisplayName" runat="server" type="text" class="form-control" placeholder="请输入显示名称" aria-describedby="basic-addon1" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <asp:LinkButton ID="SaveFormStructure_Create" CssClass="btn btn-primary ng-binding" OnClick="SaveFormStructure_Create_Click" runat="server">确认</asp:LinkButton>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script>
        var HtmlCodeMirror;
        $("#buttonContent").html(decodeURI($("#buttons").val()));

        function addHover() {
            $("#buttonContent").children().on("mouseenter", function () {
                var div = "<div pid='" + $("#myModalId").val() + "' style='background-color:transparent;left: " + $(this).offset().left + "px;top: " + $(this).offset().top + "px;width: " + $(this).outerWidth() + "px;height: " + $(this).outerHeight() + "px;text-align: center;background:z-index: 99999;position:absolute' onclick='editButton(this);event.stopPropagation();' ></div>";
                $(this).append($(div));
            })
            $("#buttonContent").children().on("mouseleave", function () {
                $(this).children("div[pid]").remove();
            })
        }
        addHover();

        function DoOnSaveButtonClicked() {
            $('#content').val(HtmlCodeMirror.getValue());
            htmlEncode();
            combineButtons();
            return checkForm();
        }

        function combineButtons() {
            var buttonshtml = "";
            $("#buttonContent").children().each(function () {
                buttonshtml += $(this).prop('outerHTML');
            })
            $("#buttons").val(encodeURI(GetHtmlEncode(buttonshtml)));
        }
        function deleteButton() {
            $("#" + $("#myModalId").val()).remove()
        }
        function editButton(o) {
            var button = $(o).parent();
            $("#myModalId").val(button.attr("id"));
            $("#myModalName").val(button.attr("title"));
            $("#myModalCSS").val(button.attr("class"));
            $("#myModalIcon").val(button.children(0).attr("class"));
            $("#myModalJS").val(button.attr("onclick"));
            $('#myModal').modal('show');
            $('#buttonFlag').val(1);
        }

        function cleanModal() {
            $("#myModalId").val("");
            $("#myModalName").val("");
            $("#myModalCSS").val("btn btn-primary");
            $("#myModalIcon").val("");
            $("#myModalJS").val("");
            $("#buttonFlag").val(0);
            $('#myModal').modal('hide');
        }

        function createButton() {
            var flag = $('#buttonFlag').val();
            if (flag == 1) {
                var button = $("#" + $("#myModalId").val());
            }
            else {
                var button = $("<div style='margin-left:5px' class='btn' onclick='" + $("#myModalJS").val() + "'></div>");
            }
            button.attr("title", $("#myModalName").val());
            button.attr("id", $("#myModalId").val());
            button.attr("onclick", $("#myModalJS").val());
            button.addClass($("#myModalCSS").val());
            button.html("");
            button.append("<span class='" + $("#myModalIcon").val() + "'></span>").append("<span>" + $("#myModalName").val() + "</span>");

            if (flag != 1) {
                $("#buttonContent").append(button);
            }
            cleanModal();
            addHover();
        }
        function htmlEncode() {
            var div1 = document.createElement('div');
            div1.appendChild(document.createTextNode(document.getElementById('content').value));
            document.getElementById('content').value = div1.innerHTML;
        }

        function GetHtmlEncode(str) {
            var div1 = document.createElement('div');
            div1.appendChild(document.createTextNode(str));
            return div1.innerHTML;
        }
        function checkForm() {
            if ($.getQueryString("formname") == null || $.getQueryString("formname") == false) {
                $("#FormNameModal").modal('show');
                return false;
            }
        }
        function btn_back() {
            window.location.href = "/Pages/EntityPages/AttributeListPage.aspx?Id=" + $.getQueryString("Id");
        }
        var PageJS = new Object();
        $("#container").dragsort({
            dragEnd: function () {
                HtmlCodeMirror.setValue($('#container').html());
                //$('#content').val($('#container').html());
            },
        });
        $('#buttonContent').dragsort({
            dragEnd: function () {
                $("#buttonContent div").each(function (i) {
                    console.log(i);
                    if (i == 0) {
                        $(this).css({ 'margin-left': '0px' });
                    }
                    else {
                        $(this).css({ 'margin-left': '5px' });
                    }
                });
            },
        });
        //$("#container").html("");
        $('#container').html($('#content').val())

        $(function () {
            /*---------------------------------------页面框架布局 begin---------------------------------------------*/
            (function () {

                //CodeMirror INIT HtmlMixedMode
                var mixedMode = {
                    name: "htmlmixed",
                    scriptTypes: [{
                        matches: /\/x-handlebars-template|\/x-mustache/i,
                        mode: null
                    },
                                  {
                                      matches: /(text|application)\/(x-)?vb(a|script)/i,
                                      mode: "vbscript"
                                  }]
                };
                var TempTextArea = document.getElementById('TempTextArea');
                $(TempTextArea).val($('#content').val());

                HtmlCodeMirror = CodeMirror.fromTextArea(TempTextArea, {
                    mode: mixedMode,
                    lineNumbers: true,
                    lineWrapping: true,
                    extraKeys: { "Alt-/": "autocomplete" },
                    selectionPointer: true,
                    styleActiveLine: true,
                    matchBrackets: true,
                    matchTag: true,
                    closeTag: true,
                    closeBrackets: true
                });
                $('#formhtmlPannel').children('.CodeMirror').addClass('tab-content');
                HtmlCodeMirror.on('change', function () {
                    $('#container').html(HtmlCodeMirror.getValue());
                    initLeftButton();
                    $('#fields li').trigger('RefreshState');
                });

                $('a[href="#formhtmlPannel"]').on('click', function () {
                    setTimeout(function () {
                        HtmlCodeMirror.refresh();
                        HtmlCodeMirror.focus();
                    }, 200);
                });//解决视觉效果的BUG
                HtmlCodeMirror.refresh();

                //End


                $(".body_left").height($(window).height() - 134).show();//100是顶部高度
                $(".body_right").height($(window).height() - 134).show();//100是顶部高度
                $(".tab-content").height($(window).height() - 176).show();//100是顶部高度
                $(".body_left").width($(window).width() - 246).show();//100是顶部高度
                $(".body_right").width(200).show();//100是顶部高度
                $(window).resize(function () {
                    $(".body_left").height($(window).height() - 134);//100是顶部高度
                    $(".body_right").height($(window).height() - 134);//100是顶部高度
                    $(".tab-content").height($(window).height() - 176);//100是顶部高度
                    $(".body_left").width($(window).width() - 246);//100是顶部高度
                    $(".body_right").width(200);//100是顶部高度

                    //此处运行两次，避免有些浏览器渲染时候存在BUG
                    $(".body_left").height($(window).height() - 134);//100是顶部高度
                    $(".body_right").height($(window).height() - 134);//100是顶部高度
                    $(".tab-content").height($(window).height() - 176);//100是顶部高度
                    $(".body_left").width($(window).width() - 246);//100是顶部高度
                    $(".body_right").width(200);//100是顶部高度
                });//当浏览器窗口变化时对各窗口大小进行重置      
            })();
            /*---------------------------------------页面框架布局 end---------------------------------------------*/

            /*--------------------------------------左侧元素构建 begin---------------------------------------------*/
            (function () {
                PageJS.build = function (name, displayname, type, size, isnecessary) {
                    var div = $("<div></div>");
                    div.addClass("form-group");
                    div.addClass("col-md-" + size);
                    div.addClass("brick");
                    div.attr("id", "c_" + name);
                    div.attr("atttype", type);

                    div.html('<label for="' + name + '" class="col-md-2 control-label">' + displayname + '\
                                    ' + (isnecessary ? '<span style="color: red;">*</span>' : '') + '\
                              </label>\
                              <div class="col-md-10">\
                                <img src="" />\
                              </div>'
                    );
                    return div;
                }
            })();
            /*---------------------------------------左侧元素构建 end---------------------------------------------*/

            /*--------------------------------------右侧按钮事件 begin---------------------------------------------*/
            (function () {
                //$("#fields li").on("click", function () {
                //    $
                $("#fields li").on("click", function () {
                    if ($("#container #c_" + $(this).attr("okey")).length > 0) {
                        $(this).addClass("active");
                        $(this).removeClass("unactive");
                        $('#container').html(HtmlCodeMirror.getValue())
                        $('#container #c_' + $(this).attr("okey")).remove();
                        HtmlCodeMirror.setValue($('#container').html());
                        //$('#content').val($('#container').html());
                    } else {
                        $(this).removeClass("active");
                        $(this).addClass("unactive");
                        HtmlCodeMirror.setValue(HtmlCodeMirror.getValue() + $(this).attr("_innerHTML"));
                        //$("#content").val($("#content").val() + $(this).attr("_innerHTML"));
                        $('#container').html(HtmlCodeMirror.getValue());
                    }
                });
                $("#fields li").on("RefreshState", function () {
                    if ($("#container #c_" + $(this).attr("okey")).length > 0) {
                        $(this).removeClass("active");
                        $(this).addClass("unactive");
                    } else {
                        $(this).addClass("active");
                        $(this).removeClass("unactive");
                    }
                });
            })();
            /*---------------------------------------右侧按钮事件 end---------------------------------------------*/

            /*--------------------------------------加载时候处理左侧按钮 begin---------------------------------------------*/
            (function () {
                initLeftButton();
            })();
            function initLeftButton() {
                $("#fields li").each(function () {
                    if ($("#container #c_" + $(this).attr("okey")).length > 0) {
                        //$("#container #c_" + $(this).attr("okey")).remove();
                        $(this).removeClass("active");
                        $(this).addClass("unactive");
                    }
                });
            }
            /*---------------------------------------加载时候处理左侧按钮 end---------------------------------------------*/

            
        })

    </script>
</body>
</html>
